<template>
  <XcDrawer ref="drawer" :title="$t('page.system.op.title')" :width="640" @onDrawerSave="onSave">
    <Form ref="opform" :model="operator" :label-width="0" :rules="rules">
      <FormItem prop="account">
        <Input v-model="operator.account" :placeholder="$t('page.system.op.tb.account')" :disabled="!adding"></Input>
      </FormItem>
      <FormItem prop="nick">
        <Input v-model="operator.nick" maxlength="12" :placeholder="$t('page.system.op.tb.nick')" :show-word-limit="true"></Input>
      </FormItem>
      <FormItem prop="roles">
        <Select v-model="operator.roles" multiple clearable :placeholder="$t('page.system.op.roles')">
          <Option v-for="item in condition.roles" :value="item" :key="item">{{ item }}</Option>
        </Select>
      </FormItem>
      <FormItem v-if="!isSuper">
        <Select v-model="operator.namespaces" multiple clearable :placeholder="$t('page.system.op.namespaces')" @on-open-change="choseNamespace">
          <Option v-for="item in condition.namespaces" :value="item" :key="item">{{ item }}</Option>
        </Select>
      </FormItem>
      <FormItem v-if="!isSuper&&operator.namespaces.length>0">
        <Select v-model="operator.apps" multiple clearable :placeholder="$t('page.system.op.apps')">
          <Option v-for="(item,i) in condition.apps" :value="item.namespace+' - '+item.name" :key="i">{{ item.namespace }} - {{ item.name }}</Option>
        </Select>
      </FormItem>
    </Form>
  </XcDrawer>
</template>
<script>
  import XcDrawer from '@/components/xcdrawer'
  export default {
    name: 'comp-op-editor',
    components: { XcDrawer },
    data() {
      return {
        adding: false,
        operator: {
          account: '',
          nick: '',
          roles: [],
          namespaces: [],
          apps: [],
        },
        rules: {
          account: [{ required: true, trigger: 'blur' }, { type: 'email', trigger: 'blur' }],
          nick: [{ required: true, max: 12, trigger: 'blur' }],
          roles: [{ required: true, type: 'array', min: 1, trigger: 'blur' }],
        },
        condition: {
          roles: [],
          namespaces: [],
          apps: [],
        }
      }
    },
    computed: {
      isSuper() {
        let roles = this.operator.roles
        let admin = false
        for (let i in roles) {
          if (roles[i] === 'SUPER') {
            admin = true
            break
          }
        }
        return admin
      }
    },
    methods: {
      show(operator) {
        this.$refs.opform.resetFields()
        this.adding = !operator
        operator = operator || {}
        this.operator.account = operator.account || ''
        this.operator.nick = operator.nick || ''
        this.operator.roles = (operator.roles || '').split(',')
        this.operator.namespaces = (operator.namespaces || '').split(',')
        this.$refs.drawer.show()
        //
        this.loadConditon()
        this.loadConditonApp()
      },
      loadConditon() {
        if (this.condition.roles.length === 0) {
          this.$md.dispatch('operator_cond').then(data => {
            if (data.retCode === 1) {
              this.condition.roles = data.roles || []
              this.condition.namespaces = data.namespaces || []
            }
          })
        }
      },
      choseNamespace(flag) {
        if (flag) {
          this.condition.apps = []
        } else {
          this.loadConditonApp()
        }
      },
      loadConditonApp() {
        if (this.isSuper) {
          this.condition.namespaces = []
          this.condition.apps = []
          return
        }
        this.$md.dispatch('operator_condapp', {
          data: this.operator.namespaces.join(',')
        }).then(data => {
          if (data.retCode === 1) {
            this.condition.apps = data.apps || []
            this.$nextTick(() => {
              this.operator.apps = data.opApps || []
            })
          }
        })
      },
      onSave() {
        if (this.operator.roles.length === 0) return
        this.$refs.opform.validate((valid) => {
          if (valid) {
            this.$md.dispatch('operator_edit', {
              data: {
                account: this.operator.account,
                nick: this.operator.nick,
                roles: this.isSuper ? 'SUPER' : this.operator.roles.join(','),
                namespaces: this.isSuper ? '' : this.operator.namespaces.join(','),
                apps: this.isSuper ? '' : this.operator.apps.join(','),
              }
            }).then(data => {
              if (data.retCode === 1) {
                this.$Message.success(this.$t('submitok'))
                this.$refs.drawer.close(true)
                this.$emit('onRefresh')
              }
            })
          }
        })
      }
    }
  }
</script>
